<template>
    <div class="wrap">
        <div class="button-wrap" @click="load">
          <div :class="['button-bottom',isClick?'button-bottom-click':'',isLoad?'button-bottom-load':'']">
            <text :class="['button-bottom-text',isClick?'button-bottom-text-click':'',isLoad?'button-bottom-text-load':'']">{{tip}}</text>
          </div>
          <!-- :style="{'transitionDuration': duration,'transitionDelay': delay}" ,isLoad?'button-top-load':'' -->
          <div ref="load" :class="['button-top',isClick?'button-top-click':'']"></div>
        </div>
        <div class="button-reset" @click="reset" ></div>
    </div>
</template>
<style scoped>
.wrap {
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
}

.button-wrap {
  width: 600px;
  height: 200px;
  align-items: center;
  justify-content: center;
}

.button-bottom {
  width: 600px;
  height: 200px;
  background-color: blueviolet;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  align-items: center;
  justify-content: center;

  transition-property: height, backgroundColor;
  transition-duration: 500;
  transition-delay: 0;
  transition-timing-function: "ease";
}

.button-bottom-click {
  height: 100px;
}

.button-bottom-load {
  height: 200px;
  background-color: #23ff89;
}

.button-bottom-text {
  color: aliceblue;
  font-size: 48px;
  opacity: 1;

  transition-property: opacity;
  transition-duration: 500;
  transition-delay: 0;
  transition-timing-function: "ease";
}

.button-bottom-text-click {
  opacity: 0;
}

.button-bottom-text-load {
  opacity: 1;
}

.button-top {
  width: 0px;
  height: 100px;
  background-color: rgb(92, 16, 163);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  position: absolute;
  left: 0;
  top: 50px;
  opacity: 1;

  transition-property: width, opacity;
  transition-duration: 2000;
  transition-delay: 500;
  transition-timing-function: "ease";
}

.button-top-click {
  width: 600px;
}

.button-top-load {
  opacity: 0;
}

.button-reset {
  width: 200px;
  height: 50px;
  background-color: blue;
}
</style>
<script>
const animation = weex.requireModule("animation");
export default {
  data() {
    return {
      isClick: false,
      isLoad: false,
      tip: "Get App!",
      duration: 2000,
      delay: 500
    };
  },
  methods: {
    reset() {
      var vm = this;
      var load = this.$refs.load;
      animation.transition(
        load,
        {
          styles: {
            opacity: "1"
          },
          duration: 200,
          timongFunction: "ease"
        },
        function() {
          vm.isLoad = false;
          vm.tip = "Get App!";
        }
      );
      setTimeout(() => {
        this.isClick = false;
      },700)
    },
    load() {
      // if (this.isClick) {
      //   this.isClick = false;
      // }else {
      //   this.isClick = true;
      // }
      var vm = this;
      this.isClick = true;
      var load = this.$refs.load;
      setTimeout(() => {
        animation.transition(
          load,
          {
            styles: {
              opacity: "0"
            },
            duration: 200,
            timongFunction: "ease"
          },
          function() {
            vm.isLoad = true;
            vm.tip = "success!";
          }
        );
      }, 2500);
    }
  }
};
</script>
